<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
            overflow-x: hidden;
        }

        /* 侧边栏（和首页一致，突出管理员功能） */
        .sidebar {
            width: 250px;
            height: 100vh;
            background-color: #f0f5ff; /* 管理员专属浅蓝背景 */
            border-right: 1px solid #dee2e6;
            color: #333;
            padding: 2rem 1rem;
            position: fixed;
            top: 0;
            left: 0;
            transition: width 0.3s ease;
            z-index: 100;
        }
        .sidebar.collapsed { width: 80px; }

        .toggle-btn {
            background: none;
            border: none;
            color: #666;
            font-size: 1.2rem;
            position: absolute;
            top: 1rem;
            right: -15px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f0f5ff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .toggle-btn:hover { transform: rotate(90deg); }

        .sidebar h3 {
            text-align: center;
            margin-bottom: 2rem;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 1rem;
            transition: opacity 0.3s ease;
            color: #4a89dc; /* 管理员专属主色 */
        }
        .sidebar.collapsed h3 span { display: none; }
        .sidebar.collapsed h3::after { content: '管理'; }

        .sidebar ul { list-style: none; padding: 0; margin-top: 2rem; }
        .sidebar li { margin-bottom: 0.5rem; }
        .sidebar a {
            color: #333;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .sidebar a i {
            width: 20px;
            text-align: center;
            color: #4a89dc; /* 图标主色 */
        }
        /* 导航高亮（当前选中/hover） */
        .sidebar a:hover, .sidebar a.active {
            background-color: #e1eaf5;
            color: #4a89dc;
            font-weight: 500;
        }
        .sidebar a.active i { color: #4a89dc; }

        .sidebar.collapsed a span { display: none; }
        .sidebar.collapsed a { justify-content: center; }

        /* 主内容区（和首页一致的滚动渐显） */
        .main-content {
            margin-left: 250px;
            padding: 3rem;
            background-color: #fff;
            min-height: 100vh;
            transition: margin-left 0.3s ease;
        }
        .sidebar.collapsed ~ .main-content { margin-left: 80px; }

        /* 欢迎文字动画（管理员专属配色） */
        .welcome-message {
            color: #333;
            font-size: 2.2rem;
            font-weight: 600;
            animation: fadeInUp 0.8s ease-out;
            margin-bottom: 3rem;
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 管理员卡片样式（增强视觉区分） */
        .admin-card {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            margin-bottom: 2rem;
            padding: 2rem;
            background-color: #f8f9fa;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-left: 4px solid #4a89dc; /* 左侧蓝色标识线 */
        }
        .admin-card.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 功能按钮样式（和首页一致的动效） */
        .btn-admin {
            transition: all 0.3s ease;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            background-color: #e1eaf5;
            color: #4a89dc;
            border: none;
            font-weight: 500;
        }
        .btn-admin:hover {
            background-color: #d1d9f0;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(74, 137, 220, 0.15);
        }

        /* 退出按钮（复用首页样式，保持一致） */
        .btn-logout {
            transition: all 0.3s ease;
            margin-top: 2rem;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            background-color: #fef2f2;
            color: #dc3545;
            border: none;
        }
        .btn-logout:hover {
            background-color: #fee2e2;
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.1);
        }

        /* 管理员统计数字样式 */
        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #4a89dc;
            margin: 0.5rem 0;
        }
        .stat-desc {
            color: #666;
            font-size: 0.95rem;
        }
    </style>
</head>
<body>
<!-- 侧边栏：管理员专属功能导航 -->
<div class="sidebar">
    <button class="toggle-btn">
        <i class="fas fa-chevron-left"></i>
    </button>
    <h3><span>管理员中心</span></h3>
    <ul>
        <li><a href="#" class="active"><i class="fas fa-tachometer-alt"></i> <span>管理仪表盘</span></a></li>
        <li><a href="#"><i class="fas fa-users-cog"></i> <span>用户管理</span></a></li>
        <li><a href="#"><i class="fas fa-user-tag"></i> <span>角色分配</span></a></li>
        <li><a href="#"><i class="fas fa-lock"></i> <span>权限配置</span></a></li>
        <li><a href="#"><i class="fas fa-file-alt"></i> <span>注册审核</span></a></li>
        <li><a href="#"><i class="fas fa-history"></i> <span>系统日志</span></a></li>
        <li><a href="#"><i class="fas fa-cog"></i> <span>系统设置</span></a></li>
        <li><a href="/index"><i class="fas fa-home"></i> <span>返回首页</span></a></li>
    </ul>
</div>

<!-- 主内容区：管理员核心功能 -->
<div class="main-content">
    <!-- 欢迎语（显示管理员用户名） -->
    <h1 class="welcome-message" th:text="'管理员，' + ${adminName} + '！'">管理员，admin1！</h1>

    <!-- 👇 新增管理员功能入口（放在后台功能区最前面） -->
    <div class="admin-function mt-4 d-flex flex-wrap gap-3">
        <a href="/admin/content/announcement/list" class="btn btn-primary px-4 py-2">
            <i class="bi bi-bullhorn me-2"></i>公告管理（发布/编辑）
        </a>
        <a href="/admin/content/file/list" class="btn btn-secondary px-4 py-2">
            <i class="bi bi-file-earmark-upload me-2"></i>文件管理（上传/删除）
        </a>

        <!-- 管理员其他功能按钮（如用户管理等，如有） -->
    </div>

    <!-- 第一行：数据统计卡片（滚动渐显） -->
    <div class="row g-3 mb-4">
        <!-- 总用户数 -->
        <div class="col-md-4">
            <div class="admin-card">
                <h4><i class="fas fa-users text-primary me-2"></i>总用户数</h4>
                <div class="stat-number">238</div>
                <div class="stat-desc">今日新增 12 人</div>
                <button class="btn-admin mt-3">查看详情</button>
            </div>
        </div>
        <!-- 待审核注册 -->
        <div class="col-md-4">
            <div class="admin-card">
                <h4><i class="fas fa-clock text-warning me-2"></i>待审核注册</h4>
                <div class="stat-number">3</div>
                <div class="stat-desc">24小时内未处理</div>
                <button class="btn-admin mt-3">去审核</button>
            </div>
        </div>
        <!-- 系统日志 -->
        <div class="col-md-4">
            <div class="admin-card">
                <h4><i class="fas fa-file-alt text-success me-2"></i>今日日志</h4>
                <div class="stat-number">126</div>
                <div class="stat-desc">异常日志 0 条</div>
                <button class="btn-admin mt-3">查看日志</button>
            </div>
        </div>
    </div>

    <!-- 第二行：核心功能卡片（滚动渐显） -->
    <div class="admin-card">
        <h3><i class="fas fa-cogs text-primary me-2"></i>核心管理功能</h3>
        <div class="row g-3 mt-3">
            <div class="col-md-6">
                <h5>用户管理</h5>
                <p class="text-muted mt-1">管理系统所有用户，支持新增、编辑、禁用、重置密码等操作</p>
                <button class="btn-admin">进入用户管理</button>
            </div>
            <div class="col-md-6">
                <h5>角色与权限</h5>
                <p class="text-muted mt-1">配置用户角色，分配功能权限，控制页面访问范围</p>
                <button class="btn-admin">配置权限</button>
            </div>
        </div>
        <div class="row g-3 mt-4">
            <div class="col-md-6">
                <h5>注册审核</h5>
                <p class="text-muted mt-1">审核新用户注册申请，通过后用户方可登录系统</p>
                <button class="btn-admin">审核列表</button>
            </div>
            <div class="col-md-6">
                <h5>系统设置</h5>
                <p class="text-muted mt-1">配置系统基础参数、登录规则、安全策略等</p>
                <button class="btn-admin">系统配置</button>
            </div>
        </div>
    </div>

    <!-- 第三行：系统状态卡片（滚动渐显） -->
    <div class="admin-card">
        <h3><i class="fas fa-server text-primary me-2"></i>系统状态</h3>
        <div class="row g-3 mt-3">
            <div class="col-md-3">
                <h5>服务器负载</h5>
                <div class="stat-number">18%</div>
                <div class="stat-desc">正常（<80%）</div>
            </div>
            <div class="col-md-3">
                <h5>内存占用</h5>
                <div class="stat-number">42%</div>
                <div class="stat-desc">可用 5.8GB</div>
            </div>
            <div class="col-md-3">
                <h5>数据库状态</h5>
                <div class="stat-number">正常</div>
                <div class="stat-desc">连接数 23</div>
            </div>
            <div class="col-md-3">
                <h5>系统版本</h5>
                <div class="stat-number">v1.0.0</div>
                <div class="stat-desc">当前为最新版</div>
            </div>
        </div>
    </div>

    <!-- 退出登录按钮 -->
    <a href="/logout" class="btn-logout">
        <i class="fas fa-sign-out-alt me-1"></i> 退出登录
    </a>
</div>

<!-- 侧边栏折叠 + 滚动渐显JS（和首页完全一致） -->
<script>
    // 1. 侧边栏折叠逻辑
    const toggleBtn = document.querySelector('.toggle-btn');
    const sidebar = document.querySelector('.sidebar');
    const icon = toggleBtn.querySelector('i');
    toggleBtn.addEventListener('click', () => {
        sidebar.classList.toggle('collapsed');
        icon.classList.toggle('fa-chevron-left');
        icon.classList.toggle('fa-chevron-right');
    });

    // 2. 滚动渐显逻辑（适配管理员卡片）
    const fadeElements = document.querySelectorAll('.admin-card');
    function checkFade() {
        fadeElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const elementVisible = 150; // 元素顶部距离视口150px时触发显示
            if (elementTop < window.innerHeight - elementVisible) {
                element.classList.add('is-visible');
            }
        });
    }
    // 页面加载时先检查一次
    window.addEventListener('load', checkFade);
    // 滚动时持续检查
    window.addEventListener('scroll', checkFade);
</script>
</body>
</html>